#include('header.html')
<script type="text/javascript">
    changeTab('用户管理');
    $(function () {
        $('select[name="post"]').change(function (e) {
            $('#user-post').submit();
        });

        $('#search').submit(function (e) {
            e.preventDefault();
            location.href = 'users?name=' + encodeURI($('input[name="name"]').val());
        });

        $('#user-import').change(function (e) {
            var file = e.target.files[0];
            var fd = new FormData();
            fd.append('file', file);
            fd.append('name', 'excel/UserInfoTable.xls');
            var xhr = new XMLHttpRequest();
            xhr.open('post', '/upload', true);

            $('#loading').removeClass('hidden');
            xhr.onload = function (e) {
                var data = JSON.parse(e.target.responseText);
                if (data.success) {
                    $.post('/excel/import/user', {'filename': data.data.filename}, function (ds) {
                        console.log(ds);
                        if (ds.success) {
                            alert("导入成功!");
                            location.reload();
                        } else {
                            alert("ERROR: " + ds.msg);
                        }
                        $('#loading').addClass('hidden');
                    })
                }
            };
            xhr.send(fd);
        });
    });

    function gotoPage(e, page) {
        var name  = encodeURI($('input[name="name"]').val());
        var pages = ${pages.totalPages};

        var post  = $('select[name="post"]').val();
        var query = "";
        if (name !== '') {
            query += ("&name=" + name);
        }
        if (post !== '') {
            query += ("&post=" + post);
        }

        var status = $(e).parent().attr("class");
        if (page > 0 && page <= pages && page !== ${pages.number + 1} &&
            status !== "active") {
            location.href = '/admin/users?pageNo=' + page + query;
        }
    }

    function s_delete(id, stu) {
        var flag = confirm("确定要删除<" + stu + ">吗？");
        if (flag) {
            $.post('/user/delete/' + id, function (data) {
                if (data.success) {
                    alert('SUCCESS: 删除成功');
                    location.reload();
                } else {
                    alert('ERROR: ' + data.msg);
                }
            });
        }
    }

    function UserInfoExport() {
        var post = $('select[name="post"]').val();
        window.open("/excel/export/user?post=" + post, '_self');
    }
    
    function UserInfoImport() {
        $('#user-import').click();
    }
</script>
<div class="work-xcontent">
    <div>
        <div class="col-lg-12 col-xs-12">
            <a class="text-black" href="/admin/users">
                <h4><span class="fa fa-hand-o-right"></span> 用户管理</h4>
            </a>
            <div style="padding: 15px 5px 0;" class="pull-right">
                <div id="loading" class="pull-left hidden" style="padding: 4px 10px;">
                    <img class="" width="20" src="/static/images/loading.jpg" alt="加载中">
                </div>
                <div class="pull-left" style="margin-right: 8px;">
                    <input type="file" id="user-import" class="hidden" accept="application/vnd.ms-excel">
                    <button onclick="UserInfoImport();" class="btn btn-info btn-sm">导入</button>
                    <button onclick="UserInfoExport();" class="btn btn-sm btn-warning">导出</button>
                </div>
                <form id="user-post" method="get" class="pull-left">
                    <div class="input-group min-min-input">
                        <select name="post" class="form-control min-min-select">
                            <option value="">-- 职位 --</option>
                            #set(Map ts = {'1':'学生', '2':'老师'})
                            #for(Map.Entry et : ts)
                            <option value="${et.key}" ${post==et.key.asInt()?'selected':''}>${et.value}</option>
                            #end
                        </select>
                    </div>
                </form>
                <form id="search" class="pull-right">
                    <div class="input-group min-input">
                        <input name="name" style="height: 30px;" value="${name ?! ''}" class="form-control" placeholder="姓名">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default btn-sm">
                                <span class="fa fa-search"></span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="col-lg-12 col-xs-12">
                <table class="table table-striped">
                    <thead class="bg-color-x">
                    <tr>
                        <td>索引</td>
                        <td>账号</td>
                        <td>姓名</td>
                        <td>职位</td>
                        <td>电话</td>
                        <td>邮箱</td>
                        <td>注册日期</td>
                        <td>评价次数</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>
                        #for(User user : pages.content)
                        <tr>
                            <td>${for.index}</td>
                            <td>${user.username}</td>
                            <td>${user.realName}</td>
                            <td><span class="post-${user.post}"></span></td>
                            <td>${user.tel}</td>
                            <td>${user.email}</td>
                            <td>${user.regTime.format('yyyy-MM-dd HH:mm')}</td>
                            <td><span class="label label-info">${user.num ?! '0'}</span></td>
                            <td>
                                <!--<button class="btn btn-xs btn-success">修改</button>-->
                                #if(admin.grade > 1)
                                <button onclick="s_delete('${user.id}', '${user.realName}')" class="btn btn-xs btn-danger">删除</button>
                                #end
                            </td>
                        </tr>
                        #else
                        <tr>
                            <td align="center" colspan="9">暂无数据</td>
                        </tr>
                        #end
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 分页按钮 -->
    #if(pages.totalPages > 1)
    <div class="col-lg-12 col-xs-12 text-center">
        <ul style="margin: 0;" class="pagination pagination-sm">
            <!--<li onclick="gotoPage(this, 1)"><a href="javascript:">首页</a></li>
            #for(int i : range(1, pages.totalPages))
            <li class="${i == pages.number + 1 ? 'active':''}"
                onclick="gotoPage(this, ${i})"><a href="javascript:">${i}</a></li>
            #end
            <li onclick="gotoPage(this, ${pages.totalPages})"><a href="javascript:">尾页</a></li>-->
        </ul>
        <span style="padding-top: 15px; font-size: 12px;" class="pull-right">
            共${pages.totalPages}页，${pages.totalElements}条数据
        </span>
    </div>
    #end
</div>
#include('footer.html')
